<template>
	<view class="f13">
		<view class="f-bt mt20" v-if="dl.boxMoney>0">
			<view class="f-g-1 flex f-y-c">
				<view class="coupon-label f-c mr5" :style="{backgroundColor:'#FDDA34',color:'#333'}">包</view>
				<view>包装费</view>
			</view>
			<view class="f-g-0 c3 f-y-c">
				<text>￥{{dl.boxMoney}}</text>
			</view>
		</view>
		<view class="f-bt mt20" v-if="dl.discounts && dl.discounts.fullsub">
			<view class="f-g-1 flex f-y-c">
				<view class="coupon-label f-c mr5" :style="{backgroundColor:'#FDDA34',color:'#333'}">减</view>
				<view>满减优惠</view>
			</view>
			<view class="f-g-0 c3 f-y-c">
				<text class="cfa">-￥{{dl.discounts.fullsub.money}}</text>
			</view>
		</view>
		<view class="f-bt mt20" v-if="dl.discounts && dl.discounts.newSub">
			<view class="f-g-1 flex f-y-c">
				<view class="coupon-label f-c mr5" :style="{backgroundColor:'#FDDA34',color:'#333'}">新</view>
				<view>新客立减</view>
			</view>
			<view class="f-g-0 c3 f-y-c">
				<text class="cfa">-￥{{dl.discounts.newSub.money}}</text>
			</view>
		</view>
		<view class="f-bt mt20" v-if="dl.discounts && dl.discounts.vipDiscount">
			<view class="f-g-1 flex f-y-c">
				<view class="coupon-label f-c mr5" :style="{backgroundColor:'#FDDA34',color:'#333'}">会</view>
				<view>会员折扣</view>
			</view>
			<view class="f-g-0 c3 f-y-c">
				<text class="cfa">-￥{{dl.discounts.vipDiscount.money}}</text>
			</view>
		</view>
		<view class="f-bt mt20" v-if="dl.couponCount>0">
			<view class="f-g-1 flex f-y-c">
				<view class="coupon-label f-c mr5" :style="{backgroundColor:'#FDDA34',color:'#333'}">劵</view>
				<view>可用优惠券</view>
			</view>
			<view class="f-g-0 c9 f-y-c">
				<block v-if="dl.couponCount>0 && dl.couponList">
					<text class='cfa' @click="sCoupon"
						v-if="dl.couponId && dl.discounts && dl.discounts.coupon">-￥{{dl.discounts.coupon.money}}</text>
					<text class='cnum cfa' @click="sCoupon"
						v-else>{{dl.couponCount}}个可用</text>
				</block>
				<text v-else>暂无可用</text>
				<u-icon name="arrow-right" size="12"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		name: 'Discounts',
		components: {

		},
		props: {
			dl: {
				type: Object,
				default: {}
			},
			pl: {
				type: Object,
				default: {}
			},
			dem: {
				type: Number,
				default: 0
			},
			couponId: {
				type: Number,
				default: 0
			},
			
		},
		computed: {
			...mapState({

			}),
		},
		data() {
			return {

			}
		},
		methods: {
			sCoupon() {
				if (this.dl && this.dl.couponList) {
					uni.setStorageSync('kyhb', this.dl.couponList)
					uni.navigateTo({
						url: '/pages/order/orders/couponList?t=1&name=优惠券&couponId=' + this.couponId
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.cnum {
		border-radius: 20rpx;
		border: 2rpx solid #ff4d3a;
		font-size: 20rpx;
		padding: 2rpx 12rpx;
	}

	.psyh {
		border-radius: 4rpx;
		border: 2rpx solid #ff4d3a;
		font-size: 20rpx;
		padding: 2rpx 12rpx;
	}
</style>